@import "../../base/base";

.warn-detail {
  @include wid100;
  @include higt100;
  @include mgT(5px);
  overflow-y: scroll;
  background-color: $cr-f;
  border: 1px solid #E3E2E7;
}

.content-area {
  @include wid100;
  @include higt100;
  font-size: $sz12;
}

.tab-title {
  @include wid100;
  @include line-height(40);
  height: 40px;
  background: #EEF1F7;
  font-size: $sz12;
  color: #3F3D38;
  cursor: pointer;
  border-bottom: 1px solid #E3E2E7;
  font-weight: bold;
}

.tab-title ul {
  height: 40px;
}

.tab-title ul li {
  @include pdA(0px);
  @include tc;
  @include fl;
  width: 132px;
  border-right: 1px solid #E3E2E7;
}

.tab-title ul li.choose {
  background: $cr-f;
}

.tab-content {
  @include pdTB(40px);
  @include pdLR(10px);
}

.content0 {
  @include mgL(40px);
}

.content0 .btn {
  @include mgT(21px);
  @include mgL(25px);
}

.content0 .btn button {
  @include tc;
  @include border-radius(5px);
  width: 145px;
  height: 36px;
  text-align: center;
  font-size: $ft-sz;
  background: $color;
  color: $cr-f;
}

.content0 .btn button:last-child {
  @include mgL(22px);
  background: $cr-f;
  color: $color;
  border: 1px solid $color;
}

.content1{
  &.detail-content table{
    td:nth-child(odd) {
      width: 10%;
    }
    td:nth-child(even) {
      width: 40%;
    }
  }

}

.content1 table {
  @include wid100;
  border: 1px solid #EEEEEE;
}

.content1 table tr, td {
  @include line-height(40);
  height: 40px;
}

.content1 table td {
  @include pdL(14px);
  text-align: left;
  padding-left: 14px;
  border: 1px solid $brand-border;
}

// tab切换页 第二区域样式-->工单追踪
.content2 {
  @include overflow;
}

.content2 .item-box {
  @include mgR(11px);
  @include mgL(37px);
  @include mgT(0px);
  @include mgB(0px);
  border-left: 2px solid #E6E6E6;
}

.content2 .item-box .item {
  @include border-radius(4px);
  @include rel;
  height: auto;
  display: flex;
}

.content2 .item-box .item:first-child:before {
  @include abs;
  content: '';
  left: -3px;
  top: -50%;
  width: 4px;
  z-index: 888;
  background-color: $cr-f;
}

.content2 .item-box .item .item-icon {
  @include abs;
  @include mgR(20px);
  @include border-radius(50%);
  height: 10px;
  width: 10px;
  border: 2px solid #E5701C;
  box-sizing: border-box;
  left: -6.5px;
  background: #FBFCFD;
  z-index: 999;
}

.content2 .item-box .item .item-text {
  @include wid100;
  @include pdL(20px);
  @include pdB(40px);
  @include rel;
  @include border-radius(4px);
  background: $cr-f;
}

.content2 .item-box .item:last-child .item-text {
  @include pdB(0px);
  > span.deal-line {
    @include line-height(18);
  }
}

.content2 .item-box .item .item-text div {
  @include line-height(24);
}

.content2 .item-box .item .item-img {
  height: 150px;
  width: 170px;
  @include mgR(10px);
}

.content2 .item-box .item .item-bimg {
  @include border-radius(1px);
  @include pdA(15px);
  @include rel;
  height: 338px;
  width: 368px;
  background: #ebebeb;
  border: 1px solid #CFCFCF;
}

.content2 .item-box .item .item-bimg:before {
  @include mgL(-22px);
  content: '';
  @include abs;
  left: 50%;
  top: 100%;
  border-top: 12px solid #CFCFCF;
  border-right: 21px solid transparent;
  border-left: 21px solid transparent;
}

.content2 .item-box .item .item-bimg:after {
  @include mgL(-18px);
  content: '';
  @include abs;
  left: 50%;
  top: 100%;
  border-top: 10px solid #ebebeb;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;

}

.content2 .item-box .item .item-bimg img {
  @include higt100;
  @include wid100;
}

.item-imgb {
  @include inline;
  height: 400px;
  width: 400px;
}
